import React, { useState } from "react";
import { createUseStyles } from "react-jss";
import { message } from "antd";

import Item from "../Register/Item";
import axios from "axios";

const useStyles = createUseStyles({
  item: {
    width: "374px",
    height: "56px",
    boxSizing: "border-box",
  },
  error: {
    lineheight: "17px",
    color: "#C55252",
  },
  tip: {
    fontSize: "12px",
    lineHeight: "17px",
    color: "#F5F5F5",
    marginBottom: "16px",
  },
  btnWrap: {
    display: "flex",
    justifyContent: "space-between",
  },
  inputContainer: {
    position: "relative",
    "&:hover": {
      "& #test": {
        opacity: 1,
        transition: "all 0.3s linear",
      },
    },
  },
  tipInfo: {
    lineHeight: "20px",
    fontSize: "14px",
    color: "#999999",
    marginBottom: "32px",
    width: "378px",
  },
});

function UpdatePassword({ username, onStep }) {
  const classes = useStyles();
  const [oldPassword, setOldPassword] = useState(""); // 旧密码

  const [newPassword, setNewPassword] = useState(""); // 新密码
  const [repeatPassword, setRepeatPassword] = useState(""); // 重复新密码

  const onCancle = () => {
    window.location.href = "/user";
  };

  const login = async () => {
    if (!newPassword) {
      message.error("密码不能为空");
      return;
    }
    if (!repeatPassword) {
      message.error("重复密码不能为空");
      return;
    }
    if (newPassword === repeatPassword) {
      const res = await axios.put(
        "http://127.0.0.1:4523/m1/6367429-6063635-973503d5/users/changePassword",
        {
          body: {
            username: '123',
            oldPassword: oldPassword,
            newPassword: newPassword,
          },
          headers: {
            "content-type": "application/json",
          },
        }
      );
      console.log(res);
      onStep(res,username,newPassword)
    } else {
      message.error("两次输入密码不同");
    }
  };

  return (
    <>
      <div className="homepage-form">
        <div className="form-title">更新密码</div>
        <div className="underline"></div>
        <div className={classes.tipInfo}>
          为了您的账号安全，请更新密码；点击确定返回首页重新登录
        </div>
        <Item label="旧密码" required={true}>
          <input
            type="password"
            placeholder="请输入旧密码..."
            onInput={(e) => setOldPassword(e.currentTarget.value)}
          />
        </Item>
        <Item label="新密码" required={true}>
          <input
            type="password"
            placeholder="请输入新密码..."
            onInput={(e) => setNewPassword(e.currentTarget.value)}
          />
        </Item>
        <Item label="确认新密码" required={true}>
          <input
            type="password"
            placeholder="重复新密码..."
            onInput={(e) => setRepeatPassword(e.currentTarget.value)}
          />
        </Item>
        <div className={classes.btnWrap}>
          <button className="form-cancel-button " onClick={onCancle}>
            取消
          </button>
          <button className="form-submit-button" onClick={login}>
            确定
          </button>
        </div>
      </div>
    </>
  );
}

export default UpdatePassword;
